<template>
  <div class="box">
    <HomeBanner v-if="paths == '/NaviGation/CateGory' ? true : false"></HomeBanner>
    <div class="main" v-if="paths == '/NaviGation/CateGory' ? true : false">
      <!-- 全部分类 -->
      <div class="main-top">
        <div class="fenlei">
          <h3>全部分类</h3>
          <ul class="list-ul">
            <li
              v-for="item in list.children"
              :key="item.id"
              @click="onCateSub(item.id)"
            >
              <img :src="item.picture" alt="" />
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </div>
      </div>
      <!--下面就是各种分类得选项-->
      <div class="content-bot" v-for="item in list.children" :key="item.id">
        <div class="main-content">
          <div class="text">
            <h3>
              -{{ item.name }}-
              <span class="text-right" @click="onCateSub(item.id)"
                >查看全部<i class="el-icon-arrow-right"></i
              ></span>
            </h3>
            <p>温暖柔软，品质之选</p>
          </div>
          <ul class="main-list">
            <li
              v-for="item1 in item.goods"
              :key="item1.id"
              @click="onPartiCulars(item1.id)"
            >
              <div class="content">
                <img :src="item1.picture" alt="" />
                <p class="name">{{ item1.name }}</p>
                <p class="title">{{ item1.desc }}</p>
                <div class="price">￥{{ item1.price }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import { navGtion } from "../../api/user";
import HomeBanner from "@/components/HomeBanner.vue";
export default {
  name: "CateGory",
  components: {
    HomeBanner,
  },
  data() {
    return {
      list: [], //保存二级菜单数据
      navId: "", //保存传过来的id
      paths: "", // 判断二级路由的显示与隐藏
    };
  },
  watch: {
    $route(to) {
      this.navId = to.query.id;
      navGtion(this.navId).then((res) => {
        this.list = res.data.result;
      });

      if (to.path == true) {
        this.onCateSub(to.query.id);
      }

      this.paths = to.path;
      console.log(this.paths);
    },
  },
  methods: {
    //跳转三级路由
    onCateSub(item) {
      this.$router.push({
        path: "/NaviGation/CateGory/CateSub",
        query: { id: item },
      });
      setInterval(function () {
        window.location.reload();
      }, 100);
    },
    //跳转详情页
    onPartiCulars(val) {
      this.$router.push({
        path: "/NaviGation/PartiCulars",
        query: { id: val },
      });
      setInterval(function () {
        window.location.reload();
      }, 100);
    },
  },
  created() {
    this.navId = this.$route.query.id;
    this.$nextTick(() => {
      navGtion(this.navId).then((res) => {
        this.list = res.data.result;
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  .main {
    width: 100vw;
    margin: 0 auto;
    .main-top {
      width: 100vw;
      margin-top: 20px;

      .fenlei {
        width: 1240px;
        // height: 260px;
        margin: 0 auto;
        background: #fff;
        h3 {
          line-height: 100px;
          font-size: 28px;
          color: #666;
          font-weight: 400;
          text-align: center;
        }
        .list-ul {
          display: flex;
          justify-content: flex-start;
          li {
            width: 168px;
            height: 140px;
            text-align: center;
            img {
              width: 100px;
              height: 100px;
            }
            p:hover {
              color: #88ba9b;
            }
          }
        }
      }
    }
    .content-bot {
      width: 100vw;
      margin-top: 20px;

      .main-content {
        width: 1240px;
        margin: 0 auto;
        background: #fff;
        position: relative;
        padding-top: 20px;
        .text {
          width: 100%;
          height: 128px;
          text-align: center;
          h3 {
            line-height: 70px;
            font-size: 28px;
            color: #666;
            font-weight: 400;
            // text-align:center;
            .text-right {
              position: absolute;
              right: 0;
              font-size: 16px;
            }
            .text-right:hover {
              color: #88ba9b;
            }
          }
          p {
            color: #999;
            height: 28px;
            font-size: 20px;
          }
        }
        .main-list {
          height: 329px;
          display: flex;
          justify-content: flex-start;
          padding-left: 35px;
          li {
            width: 170px;
            height: 259px;
            padding: 20px 30px;
            transition: all 0.5s;
            .content {
              width: 100%;
              height: 100%;
              img {
                width: 160px;
                height: 160px;
              }
              p {
                display: block;
                width: 160px;
                padding-top: 10px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .name {
                font-size: 16px;
                height: 32px;
                color: #333;
              }
              .title {
                font-size: 14px;
                color: #999;
                height: 29px;
              }
              .price {
                font-size: 20px;
                height: 38px;
                color: #cf4444;
              }
            }
          }
          li:hover {
            transform: translateY(-10px);
            box-shadow: 0px 0px 5px #ccc;
          }
        }
      }
    }
  }
}
</style>